<template>
  <div>
    <div>
      <Title :title="title" :gotoRoute="gotoRoute"></Title>
    </div>
    <div>
      <div class="item-info border-bottom">
        <em>转出账户:</em>
        <div class="info">
          {{this.$store.state.transferAccount}}
        </div>
      </div>
      <div class="item-info border-bottom">
        <em>收款户名:</em>
        <div class="info">
          {{this.$store.state.CollectionName}}
        </div>
      </div>
      <div class="item-info border-bottom">
        <em>收款账号:</em>
        <div class="info">
          {{this.$store.state.CollectionAccount}}
        </div>
      </div>
      <div class="item-info border-bottom">
        <em>收款银行:</em>
        <div class="info">
          {{this.$store.state.CollectionBank}}
        </div>
      </div>
      <div class="item-info border-bottom">
        <em>汇款金额:</em>
        <div class="info">
          {{this.$store.state.RemittanceAmount}}
        </div>
      </div>
      <div class="item-info border-bottom">
        <em>收款附言:</em>
        <div class="info">
          {{this.$store.state.CollectionStatement}}
        </div>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm "
               style="margin-top: 15px">
        <el-form-item label="验证码" prop="VerificationCode" class="item">
          <el-input v-model="ruleForm.VerificationCode" placeholder="请输入验证码"></el-input>
          <time-btn style="margin-left: 10px"></time-btn>
        </el-form-item>
      </el-form>
      <el-row v-if="!isSend" style="text-align: center">
        <el-button class="button" type="primary" disabled>转账</el-button>
      </el-row>
      <el-row v-if="isSend" style="text-align: center;">
        <router-link to="/TransferResult">
          <el-button class="button" type="primary" @click="submitForm('ruleForm')">转账</el-button>
        </router-link>
      </el-row>
    </div>
  </div>
</template>

<script>
import Title from '../components/title'
import TimeBtn from '../components/TimeBtn'

export default {
  name: 'TransferConfirm',
  components: {
    Title,
    TimeBtn
  },
  data () {
    return {
      title: '转账确认页',
      serialNumber: 1000000,
      gotoRoute: '/',
      ruleForm: {
        VerificationCode: ''
      },
      rules: {
        VerificationCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          { min: 6, max: 6, message: '请输入六位验证码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isSend () {
      var isSend = false
      if (this.ruleForm.VerificationCode && this.ruleForm.VerificationCode.length === 6) {
        isSend = true
      }
      return isSend
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('转账成功')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      var serialNumber = this.serialNumber
      this.$store.commit('sendserialNumber', serialNumber)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .item-info
    margin-top 15px
    overflow hidden
    width 100%
    height 40px
    line-height 40px
    position relative
    display flex
    justify-content space-between
    padding 0 3px
    .info
      text-align center
      margin-right 10px
  .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before
    border-bottom: 3px solid #eaeaea;
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover
    width 300px
  .el-button--primary
    width 300px
  .el-input
    width 65%
  .el-form-item__label
    text-align center
</style>
